<template>
  <n-modal v-model:show="proxyParmas.show" :trap-focus="false" class="basic_modal" style="width: 1236px">
    <n-card :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="basic_header">
        <n-ellipsis style="font-size: 16px; font-weight: bold; color: #262626; width: 90%">
          {{ title }}
        </n-ellipsis>
        <div class="close_box" @click="closeModal">
          <n-icon class="close_icon" :component="CloseOutline" :size="24" color="#B3B3B3"></n-icon>
          <!-- <img class="close_icon" src="./assets/close_icon.png" alt="" /> -->
        </div>
      </div>
      <div class="split_line"></div>

      <slot name="overview"></slot>

      <n-data-table
        :style="{ '--s-th-height': size === 'medium' ? '32px' : '48px', '--s-td-height': size === 'medium' ? '48px' : '60px' }"
        :bottom-bordered="true"
        :columns="columns"
        :data="data"
        :loading="loading"
        :bordered="false"
      />
      <div style="display: flex; justify-content: end; margin-top: 24px">
        <n-pagination
          :page="proxyParmas.current"
          :pafe-size="proxyParmas.pageSize"
          :item-count="total"
          show-size-picker
          show-quick-jumper
          simple
          :page-sizes="defaultPageSizes"
          :on-update:page="onChange"
          :on-update:page-size="onUpdatePageSize"
        >
          <template #prefix>共{{ total }}条数据</template>
          <template #suffix>页</template>
        </n-pagination>
      </div>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { CloseOutline } from '@vicons/ionicons5'
import { DataTableColumns } from 'naive-ui'

interface ModelParams {
  /** 弹窗显隐控制 */
  show: boolean
  /** 表格页码 */
  current: number
  /** 表格页容量 */
  pageSize: number
}
type Size = 'medium' | 'large'

const props = withDefaults(
  defineProps<{
    /** 双向绑定参数 */
    modelParams: ModelParams
    /** 弹窗标题 */
    title: string
    /** 表格数据 */
    data: Array<any>
    /** 表格数据条数 */
    total: number
    /** 表格项 */
    columns: DataTableColumns<any>
    /** 表格页容量选项 */
    defaultPageSizes?: Array<number>
    /** 表单型号: 中表格采用32+48的尺寸搭配/大表格采用48+60的尺寸搭配 */
    size?: Size
    /** 表格加载参数 */
    loading?: boolean
  }>(),
  {
    defaultCurrent: 1,
    defaultPageSize: 10,
    size: 'medium',
    defaultPageSizes: () => [10]
  }
)
const emit = defineEmits<{
  (e: 'update:modelParams', val: ModelParams)
  (e: 'changeCurrent', val: number)
  (e: 'changePageSize', val: number)
  (e: 'closeModal')
}>()

/** 代理参数 */
const proxyParmas = computed({
  get() {
    return new Proxy(props.modelParams, {
      set(obj, name, val) {
        emit('update:modelParams', {
          ...obj,
          [name]: val
        })
        return true
      }
    })
  },
  set(val) {
    emit('update:modelParams', val)
  }
})

const rowClassName = (_, index: number) => {
  if (index % 2 === 0) return `even-s`
  return `odd-s`
}

/**
 * @description 页码更新回调函数
 * @param newPage 页码
 */
const onChange = (newPage: number) => {
  proxyParmas.value.current = newPage
  emit('changeCurrent', newPage)
}

/**
 * @description 页容量更新回调函数
 * @param newPageSize 页容量
 */
const onUpdatePageSize = (newPageSize: number) => {
  proxyParmas.value.pageSize = newPageSize
  emit('changePageSize', newPageSize)
}

/**
 * @description 关闭按钮点击事件
 */
const closeModal = () => {
  proxyParmas.value.show = false
  emit('closeModal')
}
</script>

<style lang="less" scoped>
:deep(.n-pagination-item--button) {
  border: none !important;
}

:deep(.n-pagination-quick-jumper > .n-input) {
  --n-border: none !important;
}

:deep(.n-data-table-table) {
  background: transparent !important;
  border-top: none !important;
  // border-spacing: 0 4px;
}

:deep(.n-data-table-thead) {
  background: transparent !important;
}

:deep(.n-data-table-th:hover) {
  background: transparent !important;
}

:deep(.n-data-table-th) {
  background: #f5f5f5;
  border-bottom: none;
  height: var(--s-th-height);
  color: #999999;
  font-size: 14px;
  padding: 0 12px;
}

:deep(.n-data-table-td) {
  background: transparent;
  background: transparent;
  height: var(--s-td-height);
  color: #262626;
  font-size: 14px;
  // border-bottom: none;
}

:deep(.even-s) {
  background: rgba(149, 182, 255, 0.1) !important;
}

:deep(.odd-s) {
  background: rgba(149, 182, 255, 0.05) !important;
}

:deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
  background: #fafafa !important;
}

:deep(.n-card__content) {
  padding: 16px 32px 24px 32px !important;
  background: #ffffff !important;
  border-radius: 6px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}

.basic_modal {
  .split_line {
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    height: 1px;
    box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  }
  .basic_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;

    .close_box {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      .close_icon {
        // width: 14px;
        // height: 14px;
      }
    }
    .close_box:hover::before {
      // background-color: rgba(255, 255, 255, 0.12);
      background-color: #f5f5f5;
    }

    .close_box::before {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      left: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 2px;
    }
  }
}
</style>
